<template>
  <div class="comment">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
      fixed
      placeholder
    />
    <!-- 标题行 -->
    <div class="box">
      <h2 class="title">{{ info.title }}</h2>
      <!-- 作者信息 -->
      <div class="aut-info">
        <div class="left-box">
          <!-- 头像 -->
          <van-image round fit="cover" :src="info.aut_photo" />
          <div class="info-box">
            <div class="aut-name">{{ info.aut_name }}</div>
            <span class="time">{{ info.pubdate | relvTime }}</span>
          </div>
        </div>
        <!-- 右侧关注按钮 -->
        <van-button icon="plus" type="info" round size="mini">关注</van-button>
      </div>
    </div>
    <!-- 评论内容 -->
    <div class="content" v-html="info.content"></div>
    <CommentList></CommentList>
  </div>
</template>

<script>
// 导入组件
import CommentList from './components/CommentList.vue'
// 导入接口
import { detailAPI } from '@/api/article'
export default {
  name: 'MyArticle',
  components: {
    CommentList
  },
  data () {
    return {
      info: {}
    }
  },
  async created () {
    const res = await detailAPI(this.$route.params.id)
    // console.log('res', res)
    this.info = res.data
  }
}
</script>

<style lang="less" scoped>
.comment {
  .content {
    margin-bottom: 20px;
  }
  .box {
    padding: 10px;
    h2 {
      font-size: 18px;
      margin: 10px;
    }
    .aut-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .van-button {
        margin-bottom: 25px;
      }
      .left-box {
        display: flex;
        height: 140px;
        justify-content: space-between;
        .van-image {
          height: 100px;
          width: 100px;
        }
        .info-box {
          margin-left: 15px;
          padding-top: 28px;
          flex: 1;
          .aut-name {
            margin-bottom: 10px;
          }
          .time {
            color: gray;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
